<%--
  Created by IntelliJ IDEA.
  User: 30822
  Date: 2023/6/11
  Time: 11:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>layout 健身房管理系统</title>
<%--    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>--%>
<%--    <meta name="renderer" content="webkit">--%>
<%--    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">--%>
<%--    <meta name="viewport" content="width=device-width, initial-scale=1">--%>
<%--    <link href="${pageContext.request.contextPath}/layui-v2.8.4/layui/css/layui.css" rel="stylesheet">--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/font_4115938_q5o09xjaz59/iconfont.css">
</head>
<script>
    function Out(){
        window.location.href="${pageContext.request.contextPath}/user/logout";
    }
    function toMemberInfo(url){
        $("#main").load(url);
    }
</script>
<body>
<%--会员管理--%>

        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <blockquote class="layui-elem-quote layui-text" style="font-size: 45px">
             会员管理
            </blockquote>
<div style="display: flex">
    <i class="iconfont icon-kechengbiao" style=""></i>
    <span style="font-size: 20px;margin-top: 12px;">会员信息表</span>
</div>
        </div>

<%--<form  method="post" id="myForm">--%>
    <div style="display: flex;float: left">
        <div class="layui-form">
            <input type="text" name="className" placeholder="请输入卡号" class="layui-input" style="margin-right: 20px;width: 100px;margin-left: 20px"  id="demoReload1">
            <hr class="ws-space-16">
        </div>
        <div class="layui-form">
            <input type="text" name="className" placeholder="请输入姓名" class="layui-input" style="margin-right: 20px;width: 100px;margin-left: 20px"  id="demoReload2">
            <hr class="ws-space-16">
        </div>
        <%--            <input type="submit" class="layui-btn"  lay-submit lay-filter="demo1" style="margin-left: 20px" value="搜索" id="submitBtn">--%>
        <button class="layui-btn" lay-submit lay-filter="demo1" style="margin-left: 20px; "id="searchBtn">搜索</button>
    </div>
<%--</form>--%>
     <button type="button" class="layui-btn layui-btn-normal" style="margin-left: 20px;float: left" id="addMember">新增会员</button>
     <button class="layui-btn layui-btn-danger" id="btn-delete-selected"  style="margin-left: 20px;float: left" id="dekMember">删除选中行</button>
<%--style="width: 1341px"--%>
<%--表格--%>
<div >
    <table class="layui-hide"  lay-filter="test" id="ID-table-demo-editable"></table>
</div>
<%--单个删除按钮--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-danger" lay-event="edit">删除</a>
</script>
<%--批量删除按钮--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
<%--        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delAll">批量删除</button>--%>
    </div>
</script>
<!-- 编辑弹出层内容 -->
<div id="edit-layer" style="display: none;">
    <form class="layui-form" lay-filter="layui-edit-form" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-block">
                <input type="text" name="userPwd" required lay-verify="required" autocomplete="off" class="layui-input"readonly="readonly" value="初始密码123456">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户性别</label>
            <div class="layui-input-block">
                <input type="text" name="gender" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户年龄</label>
            <div class="layui-input-block">
                <input type="text" name="userAge" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户手机号</label>
            <div class="layui-input-block">
                <input type="text" name="userPhone" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会员卡号</label>
            <div class="layui-input-block">
                <input type="text" name="userCard" required lay-verify="required" autocomplete="off"
                       class="layui-input" readonly="readonly" value="系统自动生成">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户身高</label>
            <div class="layui-input-block">
                <input type="text" name="userHeight" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户体重</label>
            <div class="layui-input-block">
                <input type="text" name="userWeight" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">办卡时间</label>
            <div class="layui-input-block">
                <input type="text" name="cardTime" required lay-verify="required" autocomplete="off" class="layui-input" readonly="readonly" value="系统自动生成">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">充值课时</label>
            <div class="layui-input-block">
                <input type="text" name="cardHour" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit-form">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">清空</button>
            </div>
        </div>
    </form>
</div>


<%--<script src="${pageContext.request.contextPath}/layui-v2.8.4/layui/layui.js"></script>--%>
<script>
<%--&lt;%&ndash;layui.use(function(){&ndash;%&gt;页面一开始就加载--%>
//     layui.use(function(){
layui.use(['table','form'], function(){
        var table = layui.table;
        var util = layui.util;
        // let data = getData();
        // 根据返回数据中某个字段来判断开启该行的编辑
        // var editable = function(d){
        //     if(d.editable) return 'text'; // 这里假设以 editable 字段为判断依据
        // };
        <%--//通过 Ajax 获取表格数据--%>
        <%-- $.ajax({--%>
        <%--    url: '${pageContext.request.contextPath}/class/ToUserClassData',--%>
        <%--     type: 'GET',--%>
        <%--     dataType: 'json',--%>
        <%--     success: function(data){--%>
        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-editable',
            // toolbar: '#toolbarDemo',
            url: '${pageContext.request.contextPath}/member/ToMemberInfo' // 此处为静态模拟数据，实际使用时需换成真实接口
            ,page: true
            ,limits: [3, 5, 10]
            ,limit: 5 // 每页默认显示的数量
            // ,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
            ,css: [
                // 对开启了编辑的单元格追加样式
                '.layui-table-view td[data-edit]{color: #16B777;}'
            ].join('')
            ,cols: [[
     {type: 'checkbox', fixed: 'left'}
    ,{field:'id', fixed: 'left', width:100, title: 'ID', sort: true,edit: 'text'}
    ,{field:'userCard', width:150, title: '会员卡账号',edit: 'text'}
    ,{field:'userName', width:125, title: '姓名',edit: 'text'}
    ,{field:'cardTime', width:300,minWidth:125, title: '办卡时间', sort: true,edit: 'text'}
    ,{field:'gender', width:100, title: '性别',edit: 'text'}
    ,{field:'userAge', width: 100, title: '年龄', sort: true,edit: 'text'}
    ,{field:'userPhone', title:'联系方式', width:500,edit: 'text'}
    ,{field:'userHeight', title:'身高', width: 100,edit: 'text'}
    ,{field:'userWeight', title:'体重', width: 100,edit: 'text'}
    ,{field:'cardHour', title:'剩余课时', width: 125,edit: 'text'}
    ,{fixed: 'right', title:'操作', width:200, minWidth: 125, toolbar: '#barDemo'}
]]

        });
        table.on('edit(test)', function(obj){
            var field = obj.field; // 得到修改的字段
            var value = obj.value // 得到修改后的值
            var oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
            var data = obj.data // 得到所在行所有键值
            var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增

            // 值的校验
            if(value.replace(/\s/g, '') === ''){
                layer.tips('值不能为空', this, {tips: 1});
                return obj.reedit(); // 重新编辑 -- v2.8.0 新增
            }
            // 编辑后续操作，如提交更新请求，以完成真实的数据更新
            // …
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/member/EditMember', // 后端编辑接口
                data: {
                    id: data.id, // 数据行编号
                    field: field, // 列名称
                    value: value // 修改后的值
                },
                success: function(result) {
                    if (result.code === 200) { // 编辑成功
                        layer.msg('编辑成功');
                    } else { // 编辑失败
                        layer.msg('编辑失败: ' + result.msg);
                    }
                },
                error: function() {
                    layer.msg('网络错误，编辑失败');
                }
            });

            // 显示 - 仅用于演示
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
        });
        // 单元格编辑后的事件
        //触发表格的编辑事件

    });


    // layui.use('table', function(){是为了获取表格数据
    layui.use('table', function(){
        var table = layui.table;
        // 监听删除选中行按钮的点击事件
        $('#btn-delete-selected').on('click', function(){
            // 获取当前选中的行数据
            var checkData = table.checkStatus('ID-table-demo-editable').data;
            // var data = checkStatus.data;
            if (checkData.length === 0) {
                // 未选中任何行，给出提示
                return layer.msg('请先选择要删除的行');
            }
            layer.confirm('确定删除选中的'+checkData.length+'条数据吗？', function(index){
                // 获取选中数据的id列表
                //$.map 方法接受两个参数，第一个参数是待处理的数组，第二个参数是一个处理函数。对于数组 checkData 中的每个元素，处理函数会调用一次，
                // 并且将该元素作为参数传递（该参数将在函数中通过 item 变量访问）。该函数的返回值将添加到 ids 数组中。
                // 在这段代码中，处理函数返回了当前元素的 id 字段的值，因此 ids 数组中的元素即为 checkData 数组中每个元素的 id 字段的值。
                const ids = $.map(checkData, function (item) {
                    return item.id;  // 假设每行数据的id为字段id
                });
                console.log(ids);
            $.ajax({
                url: '${pageContext.request.contextPath}/member/delMember',
                    type: 'post',
                    data: { ids: ids },
                success: function(result) {
                    if (result.code ==200 ) {
                        layer.msg('删除成功');
                        // 删除成功后重新加载表格数据
                        table.reload('ID-table-demo-editable');
                        toMemberInfo('${pageContext.request.contextPath}/member/ToMember');
                    } else {
                        layer.msg('删除失败');
                    }
                },
                error: function() {
                    layer.msg('服务器异常，请稍后再试！');
                }
            });
        });
    });
    });
//    模糊查询
<%--layui.use(['form'], function(){--%>

<%--    const form = layui.form;--%>
<%--    const data = form.val('myForm');--%>
<%--    form.on('submit(demo1)', function(){--%>
<%--        let userCard = data.field.userCard; // 获取表单字段值--%>
<%--        // console.log(data.field );--%>
<%--        // 此处可执行 Ajax 等操作--%>
<%--        // …--%>
<%--        //发送修改请求--%>
<%--        $.ajax({--%>
<%--            type: "POST",--%>
<%--            url: '${pageContext.request.contextPath}/member/ToMemberInfo',--%>
<%--            data: {userCard},--%>
<%--            // cache: false, // 禁用缓存--%>
<%--            success: function(){--%>
<%--                toMemberInfo('${pageContext.request.contextPath}/member/ToMember');--%>
<%--            },--%>
<%--            error: function(){--%>
<%--                layer.msg('服务器异常，请稍后再试！');--%>
<%--            }--%>
<%--        });--%>

<%--        return false; // 阻止默认 form 跳转--%>
<%--    });--%>
<%--});--%>
// 监听表单提交事件
//    模糊查询

layui.use('table', function() {
    var table = layui.table;
    //监听表格搜索按钮的点击事件
    //keyup键盘输入事件,demoReload是input的id
    // $('#searchBtn').on('click', function() {，searchBtn是button的id
    // $('#demoReload').on('keyup', function() {
    $('#searchBtn').on('click', function() {
        //获取输入框当前的文本值
        // var keyWord = $(this).val();
        var keyWord1 = $('#demoReload1').val();
        var keyWord2 = $('#demoReload2').val();
        //执行重载
        table.reload('ID-table-demo-editable', {
            page: {
                curr: 1 //重新从第一页开始
            },
            where: {
                userCard: keyWord1, //分类名称
                userName: keyWord2
            },
            method: 'post'   //需要这行才能将where内的参数以post请求形式进行传输
        });
    });
});


    //  layui.use(['layer'], function() {是为了获取弹窗的数据
    layui.use(['layer'], function() {
        var layer = layui.layer;
        //定义表单，为了获取表单数据
        let form = layui.form;
        // 监听按钮点击事件
        $('#addMember').on('click', function() {
            // 弹出层
            layer.open({
                type: 1,
                title: '添加会员',
                area: ['500px', '350px'],
                content: $('#edit-layer').html(),

                success: function(layero, index){
                    //弹出层中的编辑回显，
                    //将监听按钮点击事件替换为table.on在表格中的编辑按钮事件，按钮得加过滤器，这样就能获取data，
                    // table.on('tool(test)', function(obj){
                    //     var data = obj.data; // 获取当前行数据
                    //     if(obj.event === 'edit'){ // 如果点击了编辑按钮
                    //         layer.open({
                    //             type: 1,
                    //             area: ['500px', '400px'],
                    //             content: $('#edit-form'),
                    //             success: function () {
                    //                 // 将当前行数据填充到表单中
                    //                 form.val("edit-form", {
                    //                     "id": data.id,
                    //                     "name": data.name,
                    //                     "description": data.description
                    //                 });
                    //             }
                    //         });
                    //     }
                    // });
                    //回显填充
                    // form.val("layui-edit-form", {
                    //     "userName": data.userName,
                    //     "userPwd": data.userPwd,
                    //     "userTel":data.userTel,
                    //     "address":data.address,
                    // })
                    // let id = data.id
                    // 监听表单提交事件
                    //edit-form表单过滤器id，或者是提交按钮的过滤器id
                    form.on('submit(edit-form)', function(data){
                        // TODO：提交表单后的处理逻辑
                        // data.field.id = id

                        $.ajax({
                            url: '${pageContext.request.contextPath}/member/addMember',
                            type: "post",
                            data: data.field,
                            success: function (result) {

                                toMemberInfo('${pageContext.request.contextPath}/member/ToMember');

                                layer.msg('添加成功',{icon: 1});

                            },
                            error: function () {
                                layer.msg('添加失败',{icon: 2});
                            }

                        });
                        layer.close(index); // 关闭弹出层

                        return false; // 阻止表单跳转
                    });
                }
            });
        })
    });


    <%--function getData() {--%>
    <%--    let jsonData;--%>
    <%--    jsonData = ${requestScope.userList}--%>
    <%--    return jsonData;--%>
    <%--}--%>
</script>

</body>
</html>
